<template>
	<view class="page">
		<!-- 收货地址 -->
		<view class="address-section" @click="chooseAddress">
			<view v-if="address" class="address-info">
				<view class="user-info">
					<text class="name">{{address.name}}</text>
					<text class="phone">{{address.phone}}</text>
				</view>
				<view class="address-detail">{{address.province}}{{address.city}}{{address.district}}{{address.detail}}</view>
			</view>
			<view v-else class="no-address">
				<text>请选择收货地址</text>
			</view>
			<image src="/static/icons/right.svg" class="right-icon"></image>
		</view>

		<!-- 商品列表 -->
		<view class="goods-list">
			<view v-for="(item, index) in orderItems" :key="index" class="goods-item">
				<image :src="item.image" class="goods-image" mode="aspectFill"></image>
				<view class="goods-info">
					<text class="goods-name">{{item.name}}</text>
					<view class="goods-price-wrap">
						<text class="goods-price">¥{{item.price}}</text>
						<text class="goods-quantity">x{{item.quantity}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 配送方式 -->
		<view class="delivery-section">
			<text class="section-title">配送方式</text>
			<view class="delivery-options">
				<view
					class="delivery-option"
					:class="{'active': deliveryType === 'express'}"
					@click="selectDelivery('express')"
				>
					<text>快递配送</text>
					<text class="delivery-fee">¥{{deliveryFee}}</text>
				</view>
				<view
					class="delivery-option"
					:class="{'active': deliveryType === 'self'}"
					@click="selectDelivery('self')"
				>
					<text>到店自提</text>
					<text class="delivery-fee">免运费</text>
				</view>
			</view>
		</view>

		<!-- 支付方式 -->
		<view class="payment-section">
			<text class="section-title">支付方式</text>
			<view class="payment-options">
				<view
					class="payment-option"
					:class="{'active': paymentType === 'wechat'}"
					@click="selectPayment('wechat')"
				>
					<image src="/static/icons/wechat-pay.svg" class="payment-icon"></image>
					<text>微信支付</text>
				</view>
				<view
					class="payment-option"
					:class="{'active': paymentType === 'alipay'}"
					@click="selectPayment('alipay')"
				>
					<image src="/static/icons/alipay.svg" class="payment-icon"></image>
					<text>支付宝</text>
				</view>
			</view>
		</view>

		<!-- 订单备注 -->
		<view class="remark-section">
			<text class="section-title">订单备注</text>
			<input
				type="text"
				v-model="remark"
				placeholder="请输入备注信息（选填）"
				class="remark-input"
			/>
		</view>

		<!-- 订单金额 -->
		<view class="amount-section">
			<view class="amount-item">
				<text>商品金额</text>
				<text>¥{{totalAmount}}</text>
			</view>
			<view class="amount-item">
				<text>运费</text>
				<text>¥{{deliveryType === 'express' ? deliveryFee : 0}}</text>
			</view>
			<view class="amount-item total">
				<text>实付金额</text>
				<text class="total-amount">¥{{actualAmount}}</text>
			</view>
		</view>

		<!-- 提交订单 -->
		<view class="submit-section">
			<view class="total-info">
				<text>合计：</text>
				<text class="total-price">¥{{actualAmount}}</text>
			</view>
			<button class="submit-btn" @click="submitOrder">提交订单</button>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue'

// 收货地址
const address = ref(null)

// 监听页面显示

// 订单商品
const orderItems = ref([
	{
		id: 1,
		name: '商品1',
		price: 99.00,
		quantity: 1,
		image: '/static/icons/cart-item.svg'
	},
	{
		id: 2,
		name: '商品2',
		price: 199.00,
		quantity: 2,
		image: '/static/icons/cart-item.svg'
	}
])

// 配送方式
const deliveryType = ref('express')
const deliveryFee = ref(10)

// 支付方式
const paymentType = ref('wechat')

// 订单备注
const remark = ref('')

// 计算商品总金额
const totalAmount = computed(() => {
	return orderItems.value.reduce((total, item) => {
		return total + item.price * item.quantity
	}, 0).toFixed(2)
})

// 计算实付金额
const actualAmount = computed(() => {
	const delivery = deliveryType.value === 'express' ? deliveryFee.value : 0
	return (Number(totalAmount.value) + delivery).toFixed(2)
})

// 选择收货地址
const chooseAddress = () => {
	// #ifdef MP-WEIXIN
	uni.chooseAddress({
		success: (res) => {
			address.value = {
				name: res.userName,
				phone: res.telNumber,
				province: res.provinceName,
				city: res.cityName,
				district: res.countyName,
				detail: res.detailInfo
			}
		},
		fail: (err) => {
			uni.showToast({
				title: '获取地址失败',
				icon: 'none'
			})
		}
	})
	// #endif

	// #ifdef H5 || APP-PLUS
	uni.navigateTo({
		url: '/pages/address/select'
	})
	// #endif
}

// 选择配送方式
const selectDelivery = (type) => {
	deliveryType.value = type
}

// 选择支付方式
const selectPayment = (type) => {
	paymentType.value = type
}

// 提交订单
const submitOrder = () => {
	if (!address.value) {
		uni.showToast({
			title: '请选择收货地址',
			icon: 'none'
		})
		return
	}

	// 构建订单数据
	const orderData = {
		address: address.value,
		items: orderItems.value,
		deliveryType: deliveryType.value,
		deliveryFee: deliveryType.value === 'express' ? deliveryFee.value : 0,
		paymentType: paymentType.value,
		remark: remark.value,
		totalAmount: totalAmount.value,
		actualAmount: actualAmount.value
	}

	// TODO: 调用创建订单接口
	console.log('订单数据：', orderData)

	// 模拟创建订单成功
	uni.showLoading({
		title: '正在创建订单'
	})

	setTimeout(() => {
		uni.hideLoading()
		uni.showToast({
			title: '订单创建成功',
			icon: 'success',
			duration: 2000,
			success: () => {
				// 跳转到支付页面
				setTimeout(() => {
					uni.redirectTo({
						url: '/pages/payment/index?orderId=123456'
					})
				}, 2000)
			}
		})
	}, 1500)
}
</script>

<style lang="scss" scoped>
.page {
	padding: 20rpx;
	background-color: #f5f5f5;
	min-height: 100vh;
	padding-bottom: 120rpx;
}

.address-section {
	background-color: #fff;
	padding: 30rpx;
	border-radius: 12rpx;
	margin-bottom: 20rpx;
	position: relative;
}

.address-info {
	.user-info {
		margin-bottom: 10rpx;
	}

	.name {
		font-size: 32rpx;
		font-weight: bold;
		margin-right: 20rpx;
	}

	.phone {
		font-size: 28rpx;
		color: #666;
	}

	.address-detail {
		font-size: 28rpx;
		color: #333;
	}
}

.no-address {
	font-size: 28rpx;
	color: #999;
}

.right-icon {
	position: absolute;
	right: 30rpx;
	top: 50%;
	transform: translateY(-50%);
	width: 32rpx;
	height: 32rpx;
}

.goods-list {
	background-color: #fff;
	padding: 20rpx;
	border-radius: 12rpx;
	margin-bottom: 20rpx;
}

.goods-item {
	display: flex;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
}

.goods-image {
	width: 160rpx;
	height: 160rpx;
	border-radius: 8rpx;
	margin-right: 20rpx;
}

.goods-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.goods-name {
	font-size: 28rpx;
	color: #333;
}

.goods-price-wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.goods-price {
	font-size: 32rpx;
	color: #ff6b81;
	font-weight: bold;
}

.goods-quantity {
	font-size: 28rpx;
	color: #999;
}

.delivery-section,
.payment-section,
.remark-section {
	background-color: #fff;
	padding: 30rpx;
	border-radius: 12rpx;
	margin-bottom: 20rpx;
}

.section-title {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 20rpx;
	display: block;
}

.delivery-options,
.payment-options {
	display: flex;
	gap: 20rpx;
}

.delivery-option,
.payment-option {
	flex: 1;
	height: 80rpx;
	border: 1rpx solid #ddd;
	border-radius: 8rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10rpx;
}

.delivery-option.active,
.payment-option.active {
	border-color: #ff6b81;
	background-color: #fff5f6;
}

.delivery-fee {
	font-size: 24rpx;
	color: #ff6b81;
}

.payment-icon {
	width: 40rpx;
	height: 40rpx;
}

.remark-input {
	width: 100%;
	height: 80rpx;
	border: 1rpx solid #ddd;
	border-radius: 8rpx;
	padding: 0 20rpx;
	font-size: 28rpx;
}

.amount-section {
	background-color: #fff;
	padding: 30rpx;
	border-radius: 12rpx;
	margin-bottom: 20rpx;
}

.amount-item {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20rpx;
	font-size: 28rpx;
	color: #666;
}

.amount-item.total {
	margin-top: 20rpx;
	padding-top: 20rpx;
	border-top: 1rpx solid #f5f5f5;
}

.total-amount {
	color: #ff6b81;
	font-size: 36rpx;
	font-weight: bold;
}

.submit-section {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background-color: #fff;
	display: flex;
	align-items: center;
	padding: 0 30rpx;
	box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
}

.total-info {
	flex: 1;
	font-size: 28rpx;
}

.total-price {
	color: #ff6b81;
	font-size: 36rpx;
	font-weight: bold;
}

.submit-btn {
	width: 240rpx;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	background-color: #ff6b81;
	color: #fff;
	border-radius: 40rpx;
	font-size: 32rpx;
}
</style>
